<template>
	<view id="cc">
		<view class="list" v-for="item in newdata">

			<myhello :aa="item" bb="1" cc="2">{{item}}</myhello>
		</view>


		<view class="top" v-show="top>800" @click="toTop">回顶部</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	//语法糖使用钩子函数时，需要通过下列方式将其导入到页面中方可使用。
	import {
		onPageScroll,
		onLoad,
		onReady,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app';


	const newdata = ref([])
	const top = ref(0);

	onPageScroll(function(e) {
		// console.log(e);
		top.value = e.scrollTop;
	})

	onLoad(function() {
		console.log("load...");
		loadData();
		
	
	})

	// onReady(function() {
	// 	loadData();
	// })

	const loadData = () => {

		if (newdata.value.length >= 50) {
			uni.showToast({
				title: "对不起，没有更多数据了"
			});
		} else {
			uni.showToast({
				title: "加载中..."
			});
			setTimeout(() => {
				for (let a = 0; a < 10; a++) {
					newdata.value.push(newdata.value.length+1);
				}
			}, 500)
		}
	}


	const toTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		})
	}

	//上拉到底触发
	onReachBottom(function() {
		loadData();
		console.log("测试一下触发了没有");
	})

	//下拉触发
	onPullDownRefresh(function(e) {

		newdata.value = Array(10);
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000)

	})


	// onPageScroll: (e) => {
	// 	console.log(e);
	// }
</script>

<style scoped>
	#cc {
		/* 		height: 3000px; */
	}

	.top {
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-radius: 50%;
		position: fixed;
		right: 100rpx;
		bottom: 100rpx;
		background-color: red;
		font-size: .7em;
		color: #fff;
	}
</style>
